@extends('user.layouts.layout')
@section('title', '订单列表')

@section('content')
    <div class="flex flex-col mt-6">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <form action="?">
                <div class="flex flex-col sm:flex-row mb-3">
                    <div class="flex">
                        <div class="relative">
                            <select name="status" class="appearance-none h-full rounded-l border block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                                <option value="">-选择状态-</option>
                                @foreach(\App\Models\Order::$statusMap as $status => $value)
                                    <option value="{{ $status }}" @if($status === request()->input('status')) selected @endif>{{ $value }}</option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20">
                                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="relative">
                            <select name="gateway" class="appearance-none h-full rounded-r border-t sm:rounded-r-none sm:border-r-0 border-r border-b block appearance-none w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500">
                                <option value="">-支付方式-</option>
                                @foreach(\App\Models\Order::$gatewayMap as $gateway => $value)
                                    <option value="{{ $gateway }}" @if($gateway === request()->input('gateway')) selected @endif>{{ $value }}</option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20">
                                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="block mt-2 sm:mt-0">
                        <input name="trade_no" placeholder="订单号" value="{{ request()->input('trade_no') }}"
                               class="appearance-none rounded-r sm:rounded-r-none rounded-l sm:rounded-l-none border border-gray-400 border-b block px-3 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none">
                    </div>
                    <div class="block mt-2 sm:mt-0">
                        <input name="trade_no" placeholder="商品标题" value="{{ request()->input('title') }}"
                               class="appearance-none rounded-r rounded-l sm:rounded-l-none border border-gray-400 border-b md:border-l-0 block px-3 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none">
                    </div>
                    <div class="sm:ml-3 mt-3 sm:mt-0 flex">
                        <button type="submit" class="rounded-l px-3 py-2 border text-sm border border-gray-400 hover:bg-gray-300">搜索</button>
                        <button type="reset" class="rounded-r border-l-0 px-3 py-2 border text-sm border border-gray-400 hover:bg-gray-300">重置</button>
                    </div>
                </div>
            </form>
            <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
                <table class="min-w-full">
                    <thead>
                    <tr>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            ID
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            订单号
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            标题
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            支付时间
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            支付金额
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            订单状态
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap ">
                            支付类型
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-100"></th>
                    </tr>
                    </thead>
                    <tbody class="bg-white">
                    @foreach($orders as $order)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                                <span>{{ $order->id }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                                <div class="text-sm leading-5 text-gray-900">{{ $order->out_trade_no }}</div>
                                <div class="text-sm leading-5 text-gray-500">{{ $order->trade_no }}</div>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                                <div class="">{{ $order->title }}</div>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5">
                                <div>{{ $order->paid_at ?: '-' }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5">
                                {{ $order->total_amount }} / {{ $order->pay_amount }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5">
                                <div class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{{ \App\Models\Order::$statusMap[$order->status] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5">
                                <div class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 block">{{ \App\Models\Order::$gatewayMap[$order->gateway] }}</div>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
                                <div class="flex">
{{--                                    <a href="{{ route('user.orders.show', ['order' => $order]) }}" class="text-indigo-600 hover:text-indigo-900">详情</a>--}}
{{--                                    <a href="#" class="text-red-600 ml-1 hover:text-red-900">退款</a>--}}
                                    @if($order->status === \App\Models\Order::STATUS_PAID)
                                        <a href="javascript:void(0);" data-url="{{ route('user.orders.notify', ['order' => $order]) }}" class="text-blue-600 ml-1 hover:text-blue-900 notify-btn">重新通知</a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="mt-6">
        {{ $orders->appends(request()->all(['status', 'gateway', 'trade_no', 'title']))->links('components.paginator') }}
    </div>
@endsection
@section('afterScript')
    <script>
        (function () {
            $('.notify-btn').click(function () {
                var $url = $(this).data('url');
                axios({
                    method:'put',
                    url: $url,
                    responseType: 'json'
                }).then(function (res) {
                    var code = res.data.code;
                    if (code === 200) {
                        $.message('重新发起通知');
                    }
                }).catch(function (res) {
                    $.message({message:'服务异常', type: 'error'});
                });
            });
        })();
    </script>
@endsection
